import { FC, useState } from 'react';
// import { useColorScheme } from '@mui/joy/styles';
import Box from '@mui/joy/Box';
import { useVM } from '@todo/ui';
import { RoomViewModel } from '../../viewmodels/room.vm.ts';
import { observer } from 'mobx-react-lite';
// import Input from '@mui/joy/Input';
// import Button from '@mui/joy/Button';
// import Stack from '@mui/joy/Stack';

const CodeEditor: FC = () => {
  const vm = useVM<RoomViewModel>(RoomViewModel);
  // const [inz, setInz] = useState('');
  // const [inx, setInX] = useState('');
  // const { mode, systemMode } = useColorScheme();

  // const editorTheme: 'light' | 'dark' | undefined =
  //   mode === 'system' ? systemMode : mode;

  // const myTheme = createTheme({
  //   theme: editorTheme || 'light',
  //   settings: {},
  //   styles: [],
  // });
  return (
    <Box width={1}>
      {vm.peerId}
      <br />
      {/*<Stack direction="row" spacing={2}>*/}
      {/*  <Input*/}
      {/*    placeholder="Type in here…"*/}
      {/*    variant="solid"*/}
      {/*    sx={{ width: '300px' }}*/}
      {/*    onChange={(e) => {*/}
      {/*      setInz(e.target.value);*/}
      {/*    }}*/}
      {/*  />*/}
      {/*  <Button*/}
      {/*    onClick={() => {*/}
      {/*      vm.connect(inz);*/}
      {/*    }}*/}
      {/*  >*/}
      {/*    Go!*/}
      {/*  </Button>*/}
      {/*</Stack>*/}
      {/*<br />*/}
      {/*<Stack direction="row" spacing={2}>*/}
      {/*  <Input*/}
      {/*    placeholder="Type in here…"*/}
      {/*    variant="solid"*/}
      {/*    sx={{ width: '300px' }}*/}
      {/*    onChange={(e) => {*/}
      {/*      setInX(e.target.value);*/}
      {/*    }}*/}
      {/*  />*/}
      {/*  <Button*/}
      {/*    onClick={() => {*/}
      {/*      vm.send(inx);*/}
      {/*    }}*/}
      {/*  >*/}
      {/*    Send!*/}
      {/*  </Button>*/}
      {/*</Stack>*/}
      {/*<CodeMirror*/}
      {/*  className="code-mirror"*/}
      {/*  autoFocus*/}
      {/*  theme={myTheme}*/}
      {/*  extensions={[html()]}*/}
      {/*  basicSetup={{*/}
      {/*    foldGutter: false,*/}
      {/*    highlightActiveLine: false,*/}
      {/*  }}*/}
      {/*  // onChange={(v, vv) => {*/}
      {/*  //   console.log('onChange', v, vv);*/}
      {/*  // }}*/}
      {/*  // onStatistics={(s) => {*/}
      {/*  //   console.log('onStatistics', s);*/}
      {/*  // }}*/}
      {/*  onUpdate={(u) => {*/}
      {/*    console.log('onUpdate', u.changes);*/}
      {/*  }}*/}
      {/*  onCreateEditor={(c) => {*/}
      {/*    console.log('onCreateEditor', c);*/}
      {/*  }}*/}
      {/*/>*/}
    </Box>
  );
};

export default observer(CodeEditor);
